<template>

<div v-if="$route.meta.useFrame != undefined && $route.meta.useFrame == false">
    <router-view></router-view>
  </div>
   <div v-if="$route.meta.useFrame == undefined || $route.meta.useFrame == true">

  <el-container>
    <el-header>

      <el-row class="header" justify="space-between">
        <el-col :span="6" class="logo">

          <img src="https://element-plus.org/images/element-plus-logo.svg">

        </el-col>
        <el-col :span="6">
          <div class="grid-content ep-bg-purple-light" />
        </el-col>
        <el-col :span="6" class="userInfo">

          <el-dropdown @command="userClick">
            <span class="el-dropdown-link">
              <el-icon>
                <User />
              </el-icon>
              赵生蚝
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>更改首页</el-dropdown-item>
                <el-dropdown-item>查看信息</el-dropdown-item>
                <el-dropdown-item divided command="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </el-col>
      </el-row>

    </el-header>

    <el-container>
      <el-aside width="auto">
        <Menu></Menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
        <!-- 路由出口 -->
      </el-main>
    </el-container>
  </el-container>
  </div>
</template>

<script setup lang="ts">
import Menu from '@/components/Menu.vue';

import { useRouter } from 'vue-router'
/*
  router: 主要负责页面跳转
  route: 主要获取当前页面的信息 id 或者 query
*/
const router = useRouter();

const userClick = (command: any) => {

  if (command == 'logout') {
    router.push({ name: 'user-login' })
  }

}

</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.el-header {
  padding-left: 0px;
  padding-right: 0px;
}

.header {
  background-color: #708090;
  padding-left: 0px;
  padding-right: 0px;
  height: 60px;

}

.el-dropdown {
  padding-left: 10px;
  line-height: 60px;
  color: white;
}

.userInfo {
  text-align: right;
  margin-right: 10px;
}

.logo img {
  height: 40px;
  margin-top: 10px;
  margin-left: 6px;
}

.el-dropdown-link {
  outline: none;
}
</style>
<style>
.el-aside {
  background-color: black;
}
</style>